<template>
 <div>
    <el-row :gutter="5">
      <el-col :span="6">
        <detail v1="总销售额" v2="￥126560">
            <template slot="v3">
                <span>周同比&nbsp;&nbsp;&nbsp;56.67%
                    <svg t="1696521046257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="5688"></path></svg>
                </span>
                <span>日同比&nbsp;&nbsp;&nbsp;19.16%
                    <svg t="1696520262440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4175" width="16" height="16"><path d="M512 597.333333l-170.666667-170.666666h341.333334l-170.666667 170.666666z" p-id="4176" fill="#1afa29"></path></svg>
                </span>
            </template>
            <template slot="v4">
                <div>&nbsp;</div>                
                <span>日销售额￥&nbsp;&nbsp;12423</span>

            </template>
        </detail>
      </el-col>

      <el-col :span="6">
        <detail v1="访问量" v2="88460">
            <template slot="v3">
                <lineChart></lineChart>
            </template>
            <template slot="v4">
                <div>&nbsp;</div> 
                <span>日访问量&nbsp;&nbsp;1234</span>
            </template>
        </detail>
      </el-col>

      <el-col :span="6">
        <detail v1="交易笔数" v2="88460">
            <template slot="v3">
                <barChart></barChart>
            </template>
            <template slot="v4">
                <div>&nbsp;</div> 
                <span>转化率&nbsp;&nbsp;65%</span>
            </template>
        </detail>
      </el-col>

      <el-col :span="6">
        <detail v1="运营活动效果" v2="78%">
            <template slot="v3">
                <progressChart></progressChart>
            </template>
            <template slot="v4">
                <span>周同比&nbsp;&nbsp;&nbsp;11.67%<svg t="1696521046257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="5688"></path></svg></span>
                <span>日同比&nbsp;&nbsp;&nbsp;16.16%<svg t="1696520262440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4175" width="16" height="16"><path d="M512 597.333333l-170.666667-170.666666h341.333334l-170.666667 170.666666z" p-id="4176" fill="#1afa29"></path></svg></span>
            </template>
        </detail>
      </el-col>
    </el-row>
 </div>
</template>

<script>
import detail from './detail'
import lineChart from './lineChart'
import barChart from "./barChart"
import progressChart from "./progressChart"
export default {
    name: 'card',
    data(){
        return {
         }
    },
    components:{
        detail,
        lineChart,
        barChart,
        progressChart
    }
}
</script>

<style>
.app-main{
    padding: 0px;
    margin: 0px;
    font-size:14px;
}

.icon{
    height: 20px;
    width: 20px;
    position: relative;
    top: 5px;
}

.el-card__body{
    padding: 10px;

}


</style>
